<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
    export default {
        props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
			    center : null,
			}
        },

        computed : {
                options () {
                    var pies = this.$refs.container
                    var W = pies.clientWidth - 4
                    var H = pies.clientHeight - 4
                    var offset = (W - H * 4) / 3
                    var center = []

                    var i = 0

                    for(let i = 0; i < 4; i ++) {
                        center.push([i * H + H / 2 + i * offset + 2, H / 2])
                    }

                    var data = this.value


                    var series = []
                    var colors = [
                        ['#7e2aff', '#4b52ff'],
                        ['#f35e52', '#fd8c34'],
                        ['#2df13a', '#dadd0a'],
                        ['#1a81ff', '#1dc9ff']
                    ]

                    center.forEach((center, i) => {
                    var serie1 = {
                        type: 'pie',
                        center: [center[0], center[1] + 2],
                        radius: [center[1] - 2, center[1]],
                        silent : true,
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        },
                        itemStyle : {    
                            color : '#6d788e'
                        },
                        data : [1]
                    }

                    var serie2 = {
                        type: 'pie',
                        center: [center[0], center[1] + 2],
                        radius: [center[1] - 8, center[1]],
                        silent : true,
                        label: {
                            show : false
                        },
                        labelLine : {
                            show : false
                        },
                        startAngle : 90,
                        data : [
                            {
                                name : data[i].name,
                                value : data[i].collected,
                                label : {
                                    show : true,
                                    position : 'center',
                                    color : '#fff',
                                    rich : {
                                        hr : {
                                            height : 5
                                        }
                                    },
                                    formatter : '{c}\n{hr|}\n{b}'
                                },
                                itemStyle : {
                                    color : new VueECharts.graphic.LinearGradient(0, 0, 1, 0, [{
                                            offset: 0,
                                            color: colors[i][0]
                                        },
                                        {
                                            offset: 1,
                                            color: colors[i][1]
                                        }
                                    ], false),
                                }
                            },

                            {
                                value : data[i].total - data[i].collected,
                                itemStyle : {
                                    opacity : 0
                                }
                            }
                        ]
                    }

                    

                    series.push(serie1)
                    series.push(serie2)
                })



                var options = {
                    grid : {
                        top : 0,
                        right : 0,
                        bottom : 0,
                        left : 0
                    },

                    series : series
                }

                return options

            }
        },
        
        mounted () {
            
        }
    }
</script>